<template>
  <div class="account-recharge-container">
    <div class="add-money-box">
      <div class="txt-box">
        <div class="title">
          <nut-divider style="border: 2px solid #5232b7" direction="vertical">
          </nut-divider>
          <span style="font-size: 15px">充值说明</span>
        </div>
        <div class="txt-item">
          1. 请使用支付宝app，通过下方收款账号进行转账支付。
        </div>
        <div class="txt-item">
          2.
          转帐后填入订单号，确认充值，系统查询到您的转帐记录后会自动加款到您的帐户中。
        </div>
      </div>
      <div class="txt-box">
        <div class="title">
          <nut-divider style="border: 2px solid #5232b7" direction="vertical">
          </nut-divider>
          <span style="font-size: 15px">充值信息</span>
        </div>
        <div class="txt-item">
          <div>支付宝名称: 河北良票网络科技有限公司</div>
          <div class="copy" @click="copyText('河北良票网络科技有限公司')">
            复制
          </div>
        </div>
        <div class="txt-item">
          <div>支付宝账号: liangpiaogzh@nianchu.net</div>
          <div class="copy" @click="copyText('liangpiaogzh@nianchu.net')">
            复制
          </div>
        </div>
      </div>
      <!-- <div class="pay-box">
        <div class="title">
          <nut-divider style="border: 2px solid #5232b7" direction="vertical">
          </nut-divider>
          <span style="font-size: 15px">收款信息</span>
        </div>
        <image src="../../assets/images/pay.jpg" @click="handleClickImage" style="width: 150px;border-radius: 4px;" mode="widthFix" />
      </div> -->
      <div class="add-box">
        <div class="title">
          <nut-divider style="border: 2px solid #5232b7" direction="vertical">
          </nut-divider>
          <span style="font-size: 15px">充值区</span>
        </div>
        <div class="add-item">
          <div class="item-title">良票账户：</div>
          <div class="value" style="margin-left: 25px">{{ FormatNumber }}</div>
        </div>
        <div class="add-item">
          <div class="item-title">支付宝订单编号：</div>
          <div class="value">
            <nut-input v-model="orderNumber" placeholder="支付宝订单编号" />
          </div>
        </div>
      </div>
      <div class="btn-box">
        <nut-button
          block
          color="linear-gradient(to right, #5232B7,#7237BC)"
          @click="rechargeAccount"
          >提交并加款</nut-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, watch, computed } from "vue";
import { storeToRefs } from "pinia";
import { useUserStore } from "../../store";
import Taro, { useDidShow, usePullDownRefresh } from "@tarojs/taro";
import * as moneyApi from "../../api/money";
import PayImg from "../../assets/images/pay.jpg";
const userStore = useUserStore();
const { Token, Userinfo } = storeToRefs(userStore);
const FormatNumber = computed(() => {
  return (
    Userinfo.value.userName.slice(0, 3) +
    "****" +
    Userinfo.value.userName.substring(7)
  );
});
const orderNumber = ref(""); //订单号
//提交价款申请
const rechargeAccount = async () => {
  if (!orderNumber.value) {
    Taro.showToast({
      title: "支付宝订单号不能为空~",
      icon: "error",
    });
    return;
  }
  try {
    const res = await moneyApi.AddMoney({ tradeNo: orderNumber.value });
    console.log(res, "orderNumber");
    if (res.state == 200) {
      Taro.showToast({
        title: "提交成功",
        icon: "success",
      });
      orderNumber.value = "";
    } else {
      Taro.showToast({
        title: res.message,
        icon: "error",
      });
    }
  } catch (error) {
    Taro.showToast({
      title: "系统错误~",
      icon: "error",
    });
    return;
  }
};
//复制订单号
const copyText = (text) => {
  Taro.setClipboardData({
    data: text, //要被复制的内容
    success: () => {
      //复制成功的回调函数
      Taro.showToast({
        //提示
        title: "复制成功",
        icon: "none",
      });
    },
  });
};
//点击图片二维码 放大显示的
const handleClickImage = () => {
  Taro.previewImage({
    current: PayImg,
    urls: [PayImg],
  });
};
</script>
<style lang="scss">
.account-recharge-container {
  padding: 10px 25px;

  .add-money-box {
    .title {
      display: flex;
      align-items: center;
      font-weight: 700;
      color: #15181d;
      margin-bottom: 25px;
    }

    .txt-box {
      padding: 15px;
      background-color: #fff;
      border-radius: 5px;

      .txt-item {
        display: flex;
        align-items: center;
        font-size: 24px;
        margin-top: 5px;
        margin-left: 15px;
        color: #858a99;
        .copy {
          color: #5232b7;
          margin-left: 30px;
        }
      }
    }

    .pay-box {
      padding: 15px;
      background-color: #fff;
      border-radius: 5px;
      margin-top: 15px;

      .pay-item {
        font-size: 24px;
        margin-top: 5px;
        margin-left: 15px;
      }
    }

    .add-box {
      padding: 15px;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 5px;

      .add-item {
        font-size: 24px;
        margin-top: 5px;
        margin-left: 15px;
        display: flex;
        align-items: center;

        .item-title {
          color: #15181d;
          font-weight: 700;
          flex: 1;
        }

        .value {
          flex: 2;
          font-weight: 700;
        }
      }

      .add-item:nth-child(n + 2) {
        margin-top: 20px;
      }
    }

    .btn-box {
      padding: 0 20px;
      margin-top: 36px;
    }
  }
}
</style>
